.cf-notification{
    -fx-padding: 25px;
    -fx-min-width: 400px;
    -fx-max-width: 500px;
    -fx-min-height: 150px;
    -fx-effect: dropshadow(three-pass-box, rgba(0, 0, 0, 0.3), 10.0, 0, 0, 0);
    -fx-background-color: rgba(255,255,255);
    -fx-background-radius: 2px;
    -fx-background-insets: 10px;
}
.cf-notification{
    -fx-spacing: 10px;
    -fx-alignment: top-left;
}
.cf-notification > .icon{
    -fx-icon-size: 20px;
    -fx-icon-color: -cf-primary-color;
}
.cf-notification.success > .icon{-fx-icon-color: -cf-success-color;}
.cf-notification.info > .icon{-fx-icon-color: -cf-info-color;}
.cf-notification.warn > .icon{-fx-icon-color: -cf-warn-color;}
.cf-notification.danger > .icon{-fx-icon-color: -cf-danger-color;}

.cf-notification > .container > .header{
    -fx-spacing: 10px;
    -fx-alignment: center-left;
}
.cf-notification > .container > .header > .title{
    -fx-font-size: 15px;
    -fx-text-fill: -cf-text-color;
}
.cf-notification > .container > .header > .close{
    -fx-icon-size: 15px;
    -fx-icon-color: derive(-cf-text-color,30%);
    -fx-cursor:hand;
}
.cf-notification > .container > .header > .close:hover{
    -fx-icon-color: -cf-text-color;
}
.cf-notification > .container > .center{
    -fx-padding: 10px 0;
}
